<template>
    <div class="m-content">
        <h3>welcome!</h3>
        <div >
            <el-avatar :src="user.avatar" :size="40"></el-avatar>
            <div>{{user.username}}</div>
        </div>
        <div class="maction">
            <el-link href="/locks">主页</el-link>
            <el-divider direction="vertical"></el-divider>
            <span>
                <el-link type="success" href="/lock/add" :disabled="!hasLogin">发布产品</el-link>
            </span>
            <el-divider direction="vertical"></el-divider>
            <span v-show="!hasLogin">
                <el-link href="/login">登录</el-link>
            </span>
            <span v-show="hasLogin">
                <el-link @click="logout">退出</el-link>
            </span>
        </div>
    </div>
</template>

<script>
    import img from '../assets/o.jpeg'

    export default {
        name: "Header",
        data(){
            return{
                user: {
                    username:'请先登录',
                    avatar: img
                    //avatar:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                },
                hasLogin: false
            }
        },
        methods: {
            logout(){
                const _this = this;
                _this.$axios.get('/logout',{
                    headers: {
                        "Authorization": localStorage.getItem("token")
                    }
                }).then((res) => {
                    console.log("=====退出登录："+res.data.msg);
                    _this.$store.commit('REMOVE_INFO');
                    _this.$router.push('/login');
                });
            }
        },
        /*created() { //初始化用户信息
            let localUser = this.$store.getters.getUser;
            console.log("========当前用户名："+localUser.username);
            console.log("========当前用户id："+localUser.id);
            if(localUser != null) {
                this.user.username = localUser.username;
                this.user.avatar = localUser.avatar;
                this.hasLogin = true
            }
        }*/
    }
</script>

<style scoped>
    .m-content {
        max-width: 960px;
        margin: 0 auto;
        text-align: center;
    }
    .maction {
        margin: 10px 0;
    }
</style>